* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html body #root {
    width: 100%;
    height: 1164px;
    overflow: hidden;
}

#root {
    background: #124458;
}

.a {

    width: 40%;
    height: 100%;
    margin: 0 auto;
    background: url(../images/demo5.jpg) no-repeat;
}

.box {
    width: 100%;
    height: 100%;
    display: grid;
    /* grid-template-columns: 10px 118px 10px 118px 10px 118px 10px 118px 10px 118px 10px 118px 10px; */
    /* grid-template-rows: 10px 79px 10px 79px 10px 79px 10px 79px 10px 79px 10px 79px 10px 79px 10px 79px 10px 79px 10px 79px 10px 79px 10px 79px 10px 79px 10px; */
    grid-template-columns: repeat(6, 106px);
    grid-template-rows: repeat(13, 68px);
    gap: 20px;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.box div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #124458;
    outline: 20px solid #124458;
}

.xiaYi {
    z-index: -1;
}
